<template>
	<view class="progress">
		<view v-if="progressList.length > 0">
			<view class="progress-list" v-for="(item, index) in progressList" :key="index">
				<view class="progress-list-datetime">{{item.createtime_text}}</view>
				<view class="progress-list-item" @click="pageToDetail(item.extra_info)">
					<view class="progress-list-item-tit">
						{{item.title}}
					</view>
					<view class="progress-list-item-con">
						{{item.content}}
					</view>
					<view v-if="Object.keys(item.extra_info).length" class="progress-list-item-detail flex-center-between">
						<text>查看详情</text>
						<uni-icon type="arrowright" color="#ccc" size="20"></uni-icon>
					</view>
				</view>
			</view>
			<uni-load-more v-if="progressList.length > pageSize" :status="loadStatus"></uni-load-more>
		</view>
		<view v-else class="no-data">
			<image class="no-data-img" src="../../static/images/no-data.png" mode="aspectFit"></image>
			无消息数据
		</view>
	</view>
</template>

<script>
	import uniLoadMore from "@/components/uni-load-more.vue"
	import uniIcon from "@/components/uni-icon.vue"
	export default {
		components: {
			uniIcon,
			uniLoadMore
		},
		data() {
			return {
				progressList: [],
				loadStatus: 'loading', //more：加载更多，noMore：没有更多数据，loading：加载中
				curPage: 1,
				pageSize: 6,
			}
		},
		onLoad() {
			this.getNoticeList()
		},
		onReachBottom() {
			// 下拉加载更多
			if (this.loadStatus === 'noMore') return
			this.getNoticeList()
		},
		methods: {
			/**
			 * 获取用户消息
			 */
			async getNoticeList() {
				this.loadStatus = 'loading'
				let res = await this.$http.request({
					method: 'post',
					url: '/api/user_msg/list',
					data: {
						type: 5,//类型 (1漏水报警 2更换滤芯 3维修保养 4平台推送 5服务进度) 非必填
						// status: 0 ,//状态(0未读, 1已读)非必填,
						page: this.curPage++, //页数(非必填)
						limit: this.pageSize, //条数(非必填)
					}
				})
				if (res.status === 1) {
					let list = res.data.data
					this.progressList = this.progressList.concat(list)
					if (res.data.data.length === 0) {
						this.loadStatus = 'noMore'
						return
					}
					this.loadStatus = 'more'
				} else {
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 3000
					})
				}
			},
			/**
			 * 跳转详情页
			 * @param {Object} extra_info
			 */
			pageToDetail(extra_info) {
				if (Object.keys(extra_info).length) {
					uni.navigateTo({
						url: 'progressDetail?id=' + extra_info.woid
					});
				}
			},
		}
	}
</script>

<style lang="scss">
	.progress{
		padding-top: 45rpx;
		&-list{
			margin-bottom: 30rpx;
			&-datetime{
				width: 250rpx;
				margin: 0 auto 20rpx;
				text-align: center;
				border-radius: $uni-border-radius-sm1;
				font-size: $uni-font-size-sm1;
				background: $uni-bg-color-grey2;
				color: $uni-text-color-inverse;
			}
			&-item{
				background: $uni-bg-color;
				border-radius: $uni-border-radius-base;
				margin: 0 30rpx;
				padding: 20rpx 30rpx 10rpx;
				&-tit{
					font-size: $uni-font-size-lg1;
				}
				&-con{
					font-size: $uni-font-size-sm2;
					line-height: 50rpx;
					margin-bottom: 20rpx;
				}
				&-detail{
					height: 90rpx;
					font-size: $uni-font-size-sm2;
					color: $uni-color-theme;
					border-top: 1rpx solid $uni-border-color;
				}
			}
		}
	}
</style>
